<template>
  <div>
    <div class="handle-box">
      <el-button type="primary" class="handle-del" @click="addClick">新增试卷</el-button>
      <el-button type="primary" class="handle-del mr10" @click="addRandomClick">新增随机试卷</el-button>
      <el-date-picker class="mr10" v-model="query.time" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"></el-date-picker>
      <el-select class="mr10" v-model="query.classVal" placeholder="请选择所属分类">
        <el-option label="全部分类" value=""></el-option>
        <el-option label="信用贷" value="1"></el-option>
        <el-option label="车贷" value="2"></el-option>
        <el-option label="房贷" value="3"></el-option>
        <el-option label="企业贷" value="4"></el-option>
        <el-option label="税贷" value="5"></el-option>
      </el-select>
      <el-input v-model="query.kw" placeholder="请输入课程名称/创建人进行搜索" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
    </div>
    <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" :index="tableIndex" label="序号" align="center" width="55"></el-table-column>
      <el-table-column prop="title" label="考试名称"></el-table-column>
      <el-table-column prop="userName" label="创建人"></el-table-column>
      <el-table-column prop="userName" label="创建时间"></el-table-column>
      <el-table-column fixed="right" prop="type" label="试题组成" width="150">
        <template slot-scope="scope">
          <p><el-tag size="mini">单选题 50道</el-tag></p>
          <p><el-tag size="mini" type="success">判断题 10道</el-tag></p>
          <p><el-tag size="mini" type="warning">简答题 5道</el-tag></p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" prop="da" label="包含分类" width="100">
        <template slot-scope="scope">
          <el-tag size="mini">信用贷</el-tag>
          <el-tag size="mini">车贷</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" prop="da" label="试题状态" width="100">
        <template slot-scope="scope">
          <el-switch v-model="delivery"></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="editClick(scope.row.id)">编辑</el-button>
          <el-button type="text" icon="el-icon-delete" class="red" @click="delClick(scope.row.id)">删除
          </el-button>
          <el-button type="text" icon="el-icon-setting" @click="appointUser(scope.row.id)">指定考试人员</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.total"
                     :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
      </el-pagination>
    </div>
    <!-- 新增试卷 -->
    <el-dialog title="试卷内容" :visible.sync="textFlg" width="90%" :close-on-click-modal='false' :close-on-press-escape='false'>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="handle-box">
            <el-select class="mr10" v-model="query.type" placeholder="请选择题目类型" style="width:50%;">
              <el-option label="全部题目" value=""></el-option>
              <el-option label="单选题" value="1"></el-option>
              <el-option label="判断题" value="2"></el-option>
              <el-option label="简单题" value="3"></el-option>
            </el-select>
            <el-select class="mr10" v-model="query.classVal" placeholder="请选择所属分类" style="width:calc(50% - 20px);">
              <el-option label="全部分类" value=""></el-option>
              <el-option label="信用贷" value="1"></el-option>
              <el-option label="车贷" value="2"></el-option>
              <el-option label="房贷" value="3"></el-option>
              <el-option label="企业贷" value="4"></el-option>
              <el-option label="税贷" value="5"></el-option>
            </el-select>
            <el-input v-model="query.kw" placeholder="请输入课程名称/创建人进行搜索" class="handle-input mr10 mrT" style="width:calc(100% - 100px);"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
          </div>
          <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column type="index" :index="tableIndex" label="序号" align="center" width="55"></el-table-column>
            <el-table-column prop="title" label="题目名称"></el-table-column>
            <el-table-column prop="type" label="题目类型" width="80">
              <template slot-scope="scope">
                <el-tag size="mini">单选题</el-tag>
                <el-tag size="mini" type="success">判断题</el-tag>
                <el-tag size="mini" type="warning">简答题</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="da" label="参考答案" width="80"></el-table-column>
            <el-table-column fixed="right" label="操作" width="80" align="center">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-plus" @click="editClick(scope.row.id)">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.total"
                           :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="12" style="height:400px;overflow-y:auto;border-left:1px solid #e1e1e1;">
          <el-row>
            <el-col class="tiTitle"><el-divider>单选题</el-divider></el-col>
            <el-col v-for="i in 10" class="mrT ticon">
              <p class="mrR">{{i + '. '}}张三有一辆宝马车，能带多少钱？能带多少钱？能带多少钱？能带多少钱？能带多少钱？能带多少钱？能带多少钱？能带多少钱？能带多少钱？能带多少钱？</p>
              <el-image class="mrT" style="width: 100px; height: 100px"
                        :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
                        :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
              </el-image>
              <p class="mrT">
                <el-radio-group v-model="resource">
                  <el-radio label="52W">
                    A.
                    <el-image class="mrT" style="width: 50px; height: 50px"
                              :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
                              :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
                    </el-image>
                    52W
                  </el-radio>
                  <el-radio label="78W">B.
                    <el-image class="mrT" style="width: 50px; height: 50px"
                              :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
                              :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
                    </el-image>
                    78W
                  </el-radio>
                  <el-radio label="18W">C.18W</el-radio>
                  <el-radio label="啥也没有">D.啥也没有</el-radio>
                </el-radio-group>
              </p>
              <span class="tiDel">取消</span>
            </el-col>
            <el-col class="mrT tiTitle"><el-divider>判断题</el-divider></el-col>
            <el-col v-for="i in 5" class="mrT ticon">
              <p class="mrR">{{i + '. '}}张三有一辆宝马车，能带多少钱？</p>
              <el-image class="mrT" style="width: 50px; height: 50px" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
                        :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
              </el-image>
              <p class="mrT">
                <el-radio-group v-model="resource">
                  <el-radio label="52W">正确</el-radio>
                  <el-radio label="啥也没有">错误</el-radio>
                </el-radio-group>
              </p>
              <span class="tiDel">取消</span>
            </el-col>
            <el-col class="mrT tiTitle"><el-divider>简答题</el-divider></el-col>
            <el-col v-for="i in 5" class="mrT ticon">
              <p class="mrR">{{i + '. '}}张三有一辆宝马车，能带多少钱？</p>
              <el-image class="mrT" style="width: 50px; height: 50px" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
                        :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
              </el-image>
              <p class="mrT">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2">
                </el-input>
              </p>
              <span class="tiDel">取消</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="textFlg = false">取 消</el-button>
        <el-button type="primary" @click="tiFormClick" :loading="tiLoad">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 随机试卷 -->
    <el-dialog title="试卷内容随机" :visible.sync="randomFlg" width="40%" :close-on-click-modal='false' :close-on-press-escape='false'>
      <el-form ref="rulesForm" :rules="rules" :model="randomForm" label-width="110px">
        <el-form-item label="单选题数量" prop="name">
          <el-input v-model="randomForm.name"></el-input>
        </el-form-item>
        <el-form-item label="单选题类型" prop="name">
          <el-checkbox-group v-model="randomForm.type">
            <el-checkbox label="1" name="type">信用贷</el-checkbox>
            <el-checkbox label="2" name="type">车贷</el-checkbox>
            <el-checkbox label="3" name="type">房贷</el-checkbox>
            <el-checkbox label="4" name="type">企业贷</el-checkbox>
            <el-checkbox label="5" name="type">税贷</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="判断题数量" prop="name">
          <el-input v-model="randomForm.name"></el-input>
        </el-form-item>
        <el-form-item label="判断题类型" prop="name">
          <el-checkbox-group v-model="randomForm.type">
            <el-checkbox label="1" name="type">信用贷</el-checkbox>
            <el-checkbox label="2" name="type">车贷</el-checkbox>
            <el-checkbox label="3" name="type">房贷</el-checkbox>
            <el-checkbox label="4" name="type">企业贷</el-checkbox>
            <el-checkbox label="5" name="type">税贷</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="简单题数量" prop="name">
          <el-input v-model="randomForm.name"></el-input>
        </el-form-item>
        <el-form-item label="简答题类型" prop="name">
          <el-checkbox-group v-model="randomForm.type">
            <el-checkbox label="1" name="type">信用贷</el-checkbox>
            <el-checkbox label="2" name="type">车贷</el-checkbox>
            <el-checkbox label="3" name="type">房贷</el-checkbox>
            <el-checkbox label="4" name="type">企业贷</el-checkbox>
            <el-checkbox label="5" name="type">税贷</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <p class="tips">（如选中类型在题库中没有或数量不足，将随机其他类型题目）</p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="randomFlg = false">取 消</el-button>
        <el-button type="primary" @click="tiFormClick" :loading="tiLoad">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 指定考试人员 -->
    <el-dialog title="指定考试人员" :visible.sync="appointUserFlg" width="40%" :close-on-click-modal='false' :close-on-press-escape='false'>
      <el-form ref="form" :model="formNum" label-width="160px">
        <el-form-item :label="'单选题分数设置 ('+formNum.radioTiNum+'题)'">
          <el-input type="number" v-model="formNum.radioTi">
            <template slot="append">分/题</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="'判断题分数设置 ('+formNum.determineTiNum+'题)'">
          <el-input type="number" v-model="formNum.determineTi">
            <template slot="append">分/题</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="'简答题分数设置 ('+formNum.simpleTiNum+'题)'">
          <el-input type="number" v-model="formNum.simpleTi">
            <template slot="append">分/题</template>
          </el-input>
        </el-form-item>
        <el-form-item label="总分">
          <el-input v-model="formNumtotal" disabled>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-transfer :titles="['所有人员','选中人员']" v-model="appointUserVal" :data="appointUserData"></el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="appointUserFlg = false">取 消</el-button>
        <el-button type="primary" @click="tiFormClick" :loading="tiLoad">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { RolePermissionsQX } from '../../../../api/index';

export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 10,
        time: [],
        kw: '',
        total: 0
      },
      tableData: [{}],

      textFlg: false,

      randomFlg: false,
      randomForm: {
        type: []
      },
      rules: {},

      appointUserFlg: false,
      appointUserData: [
        {
          key: 0,
          label: '张三',
        },
        {
          key: 1,
          label: '李四',
        },
        {
          key: 2,
          label: '王五',
        }
      ],
      appointUserVal: [1],

      formNum: {
        radioTi: 0,
        radioTiNum: 20,
        determineTi: 0,
        determineTiNum: 10,
        simpleTi: 0,
        simpleTiNum: 5,
      },
    }
  },
  computed: {
    formNumtotal() {
      return Number(this.formNum.radioTi) * Number(this.formNum.radioTiNum) + Number(this.formNum.determineTi) * Number(this.formNum.determineTiNum) + Number(this.formNum.simpleTi) * Number(this.formNum.simpleTiNum)
    }
  },
  methods: {
    //初始化
    getList() {

    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //翻页
    handlePageChange(page) {
      this.query.page = page;
      this.getList();
    },
    //搜索
    souClick() { },
    //新增试卷
    addClick() {
      this.textFlg = true;
    },
    //新增随机试卷
    addRandomClick() {
      this.randomFlg = true;
    },
    //指定考试人员
    appointUser() {
      this.appointUserFlg = true;
    }
  }
}
</script>
<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
.red {
    color: red;
}
.mrT {
    margin-top: 10px;
}
.mrR {
    margin-right: 30px;
}
.ticon {
    position: relative;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.tiDel {
    cursor: pointer;
    position: absolute;
    font-size: 14px;
    color: red;
    top: 0;
    right: 0;
}
.tiTitle {
    font-weight: bold;
    font-size: 16px;
}
.tips {
    font-size: 14px;
    color: #999;
    padding-left: 30px;
}
</style>
